import Vue from 'vue'
import App from './App.vue'
// element 组件
import ElementUI from "element-ui";
// element 样式
import "element-ui/lib/theme-chalk/index.css";
import VueRouter from "vue-router";
import Home from "./pages/home/Home.vue";
import Service from "./pages/home/Service.vue";
import Product from "./pages/home/product/Product.vue";
import ProductList from "./pages/home/product/ProductList";
import ProductEdit from "./pages/home/product/ProductEdit";
import Login from "./pages/Login";
import { getGlobalData } from "./utils/globalData";


Vue.use(ElementUI);
Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    // 父路由组件
    component: App,
    name: "App",
    // 子路由
    children: [
      {
        path: "login",
         // 子路由组件，会替换父路由组件中的<router-view>中的内容
        component: Login,
        name: "Login"
      },
      {
        path: "home",
        component: Home,
        name: "Home",
        children: [
          {
            path: "service",
            component: Service,
            name: "Service"
          },
          {
            path: "product",
            component: Product,
            name: "Product",
            children: [
              {
                path: "list",
                component: ProductList,
                name: "ProductList",
              },
              {
                path: "add/0",
                component: ProductEdit,
                name: "ProductAdd"
              },
              {
                path: "edit/:id",
                component: ProductEdit,
                name: "ProductEdit"
              }
            ]
          }

        ]
      }
    ]

  }
]

const router = new VueRouter({
  routes
});

router.beforeEach((to, from, next) => {
  if (to.name !== "Login") {
    // 检查登录
    if (!getGlobalData("username")) {
      next({ name: "Login" });
    }
  }
  next();
});

new Vue({
  el: "#app",
  router,
  render: h => h(App),
});
